<template>
  <div class="yhzz">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>隐患整治</div>
      </div>
    </header>
    <div class="main" v-if="data">
      <div class="main-box">
        <div class="main-box-in yh_light">
          <img class="hd" v-show="wwc_flag" src="../../assets/images/jsd.gif" />
          <img class="gou" v-show="!wwc_flag" src="../../assets/images/lg.png" />
          <div> {{data.xcdx?data.xcdx:'无对象'}}<span v-if="data.dizhi != '' && data.dizhi != undefined && data.dizhi != null">({{data.dizhi}})</span></div>
        </div>
        <!-- <div class="main-box-in" v-if="data.dizhi != '' && data.dizhi != undefined && data.dizhi != null">
          <div>具体地址-{{data.dizhi}}</div>
        </div> -->
      </div>
      <!-- <div class="main-box">
        <div class="main-box-in">
          <div class="left yh_light">
            <img class="hd" v-show="wwc_flag" src="../../assets/images/jsd.gif" />
            <img class="gou" v-show="!wwc_flag" src="../../assets/images/lg.png" />
            隐患
          </div>
          <p class="text-rgt"></p>
        </div>
      </div> -->


      <div class="zxrw" v-for="(zxrw,zxrw_index) of zxrw_list">
        <div class="main-box">
          <div class="main-box-in">
            <div>专项任务-{{zxrw.taskName}}</div>
          </div>
        </div>
        <div class="main-box">
          <div class="main-box-in">
            <div>具体任务-{{(zxrw.child&&zxrw.child.length>0)?zxrw.child[0].concretenessName:''}}</div>
          </div>
        </div>
      </div>

      <div class="main-box" v-show="data.qi_name">
        <div class="main-box-in">
          <div>参加领导-{{data.qi_name}}</div>
        </div>
      </div>
      <div class="main-box" v-show="data.jie_name">
        <div class="main-box-in">
          <div>街道部门-{{data.jie_name}}</div>
        </div>
      </div>
      <div class="main-box" v-show="data.she_name">
        <div class="main-box-in">
          <div>社区-{{data.she_name}}</div>
        </div>
      </div>

      <div class="yh-box" v-for="(yh, yh_index) in yh_list">
        <div class="" style="background-color: #fff">
          <div class="main-box">
            <div class="main-box-in">
              <div>隐患类别-{{yh.yhlb}}</div>
            </div>
          </div>
          <div class="main-box">
            <div class="main-box-in">
              <div class="left yhd">隐患点-</div>
              <p class="right yhd-txt">{{yh.name}}</p>
            </div>
          </div>

          <div class="">
            <div class="main-box imglist-title" v-show="yh.noweInfo.title">
              <div class="main-box-in msnr" :class="{'msnr-more':(yh.noweInfo.title&&yh.noweInfo.title.length>40)}">
                {{yh.noweInfo.title }}
              </div>
            </div>
            <div class="list" v-show="yh.noweInfo.contract">
              <div class="yy" @click="play(yh_index)">
                <img v-show="!yh.isPlay" src="../../assets/images/play.png" class="img_yuyin" />
                <img v-show="yh.isPlay" src="../../assets/images/play_dt.gif" class="img_yuyin" />
                <span class="ly_s">{{yh.noweInfo.contractime}}</span>
              </div>
            </div>
            <div class="lists lists1">
              <ul class="lists imgs_ul" v-show="yh.noweInfo.imgurl">
                <li class="img-li" v-for="(obj,i) of yh.noweInfo.imgurl.split(',')">
                  <div class="img-box-main">
                    <div class="img-box2">
                      <img :src="showUrl+obj" alt="" class="imgs">
                    </div>
                  </div>
                  <div class="imglist-title">{{yh.noweInfo.imgText.split(',')[i]}}</div>
                </li>
              </ul>
              <ul class="video-box" v-show="yh.noweInfo.videourl">
                <li class="video-list" v-for="(obj,i) of yh.noweInfo.videourl.split(',')">
                  <video controls>
                    <source :src="showUrl+obj" type="video/mp4">
                    <source :src="showUrl+obj" type="video/ogg">
                    您的浏览器不支持Video标签。
                  </video>
                </li>
              </ul>
            </div>
          </div>

          <div class="" style="background-color: #fff" v-show="yh.rectificaContent.id&&yh.yhlb=='即查即改'">
            <div class="">
              <div class="main-box imglist-title" v-show="yh.rectificaContent.title">
                <div class="main-box-in msnr" style="border-top: 1px solid #ddd;"
                  :class="{'msnr-more':(yh.rectificaContent.title&&yh.rectificaContent.title.length>40)}">
                  {{yh.rectificaContent.title }}
                </div>
              </div>
              <div class="list" v-show="yh.rectificaContent.contract">
                <div class="yy" @click="play3(yh_index)">
                  <img v-show="!yh.isPlay3" src="../../assets/images/play.png" class="img_yuyin" />
                  <img v-show="yh.isPlay3" src="../../assets/images/play_dt.gif" class="img_yuyin" />
                  <span class="ly_s">{{yh.rectificaContent.contractime}}</span>
                </div>
              </div>
              <div class="lists lists1">
                <ul class="lists imgs_ul" v-show="yh.rectificaContent.imgUrl">
                  <li class="img-li" v-for="(obj,i) of yh.rectificaContent.imgUrl.split(',')">
                    <div class="img-box-main">
                      <div class="img-box2">
                        <img :src="showUrl+obj" alt="" class="imgs">
                      </div>
                    </div>
                    <div class="imglist-title">{{yh.rectificaContent.imgText.split(',')[i]}}</div>
                  </li>
                </ul>
                <ul class="video-box" v-show="yh.rectificaContent.videoUrl">
                  <li class="video-list" v-for="(obj,i) of yh.rectificaContent.videoUrl.split(',')">
                    <video controls>
                      <source :src="showUrl+obj" type="video/mp4">
                      <source :src="showUrl+obj" type="video/ogg">
                      您的浏览器不支持Video标签。
                    </video>
                  </li>
                </ul>
              </div>
            </div>
          </div>


          <div class="main-box yh-jzrq" v-show="yh.yhlb=='限期整改'">
            <div class="main-box-in">
              <div>截止日期-{{getJzrq(yh.noweInfo.rectificationTime)}}</div>
            </div>
          </div>
          <div class="main-box yh-dibu">
            <div class="main-box-in">
              <div class="dians" style="width: auto;">
                <div class="dians-name">{{ data.community }}</div>
                <div class="dians-sq">{{ data.person }}</div>
                <div class="dians-box">
                  <img src="../../assets/images/tabbar_user.png" alt="" class="dian-imgs">
                  <span>{{ data.peopleNum }}</span>
                </div>
              </div>
              <div class="list_two">{{ getTime(data.addTime) }}</div>
            </div>
          </div>
        </div>

        <div class="" style="background-color: #fff;border-top: 0.009259rem solid #ddd;"
          v-for="(xz_item,xz_index) of yh.remediaHiddenDangers" :key="xz_index">
          <div class="main-box">
            <div class="main-box-in">
              <div>跟踪类别-{{getXclbMc(xz_item.yhlb)}}</div>
            </div>
          </div>

          <div class="">
            <div class="main-box imglist-title" v-show="xz_item.title">
              <div class="main-box-in msnr" :class="{'msnr-more':(xz_item.title&&xz_item.title.length>40)}">
                {{xz_item.title }}
              </div>
            </div>
            <div class="list" v-show="xz_item.contract">
              <div class="yy" @click="play4(yh_index,xz_index)">
                <img v-show="!xz_item.isPlay4" src="../../assets/images/play.png" class="img_yuyin" />
                <img v-show="xz_item.isPlay4" src="../../assets/images/play_dt.gif" class="img_yuyin" />
                <span class="ly_s">{{xz_item.contractime}}</span>
              </div>
            </div>
            <div class="lists lists1">
              <ul class="lists imgs_ul" v-show="xz_item.imgurl">
                <li class="img-li" v-for="(obj,i) of xz_item.imgurl.split(',')">
                  <div class="img-box-main">
                    <div class="img-box2">
                      <img :src="showUrl+obj" alt="" class="imgs">
                    </div>
                  </div>
                  <div class="imglist-title">{{xz_item.imgText.split(',')[i]}}</div>
                </li>
              </ul>
              <ul class="video-box" v-show="xz_item.videourl">
                <li class="video-list" v-for="(obj,i) of xz_item.videourl.split(',')">
                  <video controls>
                    <source :src="showUrl+obj" type="video/mp4">
                    <source :src="showUrl+obj" type="video/ogg">
                    您的浏览器不支持Video标签。
                  </video>
                </li>
              </ul>
              <div class="main-box yh-jzrq" v-show="getXclbMc(xz_item.yhlb).indexOf('限期')>=0">
                <div class="main-box-in">
                  <div>截止日期-{{getJzrq(xz_item.rectificationTime)}}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="main-box yh-dibu">
            <div class="main-box-in">
              <div class="dians" style="width: auto;">
                <div class="dians-name">{{ xz_item.dwname }}</div>
                <div class="dians-sq">{{ xz_item.username }}</div>
                <div class="dians-box">
                  <img src="../../assets/images/tabbar_user.png" alt="" class="dian-imgs">
                  <span>1</span>
                </div>
              </div>
              <div class="list_two">{{ getTime(xz_item.addtime) }}</div>
            </div>
          </div>
        </div>
        <!-- yh.noweInfo.status==3 为移交 放开移交 -->
        <div class="" v-show="!(yh.noweInfo.status==1||yh.noweInfo.status==6)"
          style="background-color: #fff;border-top: 0.009259rem solid #ddd;">
          <div class="main-box">
            <div class="main-box-in" v-show="yh.xclb||yh.xclb===0" @click="showXclbTk(yh_index,yh)">
              <div>跟踪巡查-{{getXclbMc(yh.xclb)}}</div>
            </div>
            <div class="main-box-in" v-show="!(yh.xclb||yh.xclb===0)">
              <div class="left">跟踪巡查</div>
              <div class="selectXclb" @click="showXclbTk(yh_index,yh)">
                <div class="">请选择</div>
                <img class="right-icon" src="../../assets/images/appa_r.png" />
              </div>
            </div>
          </div>

          <div class="security" v-show="yh.xclb||yh.xclb===0">
            <div class="boxitem">
              <textarea placeholder="请描述内容(500字以内)" v-model="yh.txtbxnr" maxlength="500" ref="count"></textarea>
            </div>
            <div class="ly_tc" :class="{'isShow':yh.isLy}">
              <img src="../../assets/images/ly_dt.gif" alt="" />
            </div>
            <div v-if="terminal === true" class="yuyin_list luru">
              <div class="ly_start" :class="{'isShow':!(yh.yyObj&&yh.yyObj.url),'noShow':(yh.yyObj&&yh.yyObj.url)}">
                <span class="ly" @touchstart="record(yh_index,$event)" @touchend="recordStop(yh_index)">
                  <img src="../../assets/images/mkf.png" />
                  <span>按住说话</span>
                </span>
              </div>
              <div class="ly_play" :class="{'isShow':(yh.yyObj&&yh.yyObj.url),'noShow':!(yh.yyObj&&yh.yyObj.url)}">
                <div>
                  <span class="ly" @click="play2(yh_index)">
                    <img v-show="yh.isPlay2" src="../../assets/images/play_dt.gif" />
                    <img v-show="!yh.isPlay2" src="../../assets/images/play.png" />
                    <span class="ly_s">{{yh.yyObj&&yh.yyObj.duration?((yh.yyObj.duration/1000)+'"'):'0"'}}</span>
                  </span>
                  <img class="del_ly" @click="deleteYy(yh_index)" src="../../assets/images/delete.png" />
                  <img class="zhuan" @click="zhuan(yh_index)" src="../../assets/images/zhuan.png" />
                </div>
              </div>
            </div>
            <ul class="img-box img_upload">
              <div class="img-item radius-m" @click="showPop(yh_index)"></div>
            </ul>
            <ul class="img-box" :class="yh.list_img&&yh.list_img.length > 0 ? 'imgs_uls' : ''">
              <li class="img-item radius-m img-list" :class="{'show-desc':obj.showDesc}" v-for="(obj,i) of yh.list_img"
                :key="i">
                <div class="img-content">
                  <img class="img-src img_tu" :src="showUrl + obj.path" />
                  <div class="img-group">
                    <div class="img-btn">
                      <div class="del-btn" @click.stop="del(yh_index,i,'img')">X</div>
                    </div>
                    <div class="img-btn">
                      <div class="desc-btn" @click.stop="showDesc(yh_index,i)">A</div>
                    </div>
                  </div>
                </div>
                <input class="img-desc" type="text" :style="(obj.remark||obj.remark===0) ? 'display: block;' : ''"
                  @click.stop="stopMP" placeholder="请输入描述" v-model="obj.remark" />
              </li>
            </ul>
            <ul class="video-list" v-for="(obj,i) of yh.list_mv">
              <video controls>
                <source :src="showUrl+obj.path" type="video/mp4">
                <source :src="showUrl+obj.path" type="video/ogg">
                您的浏览器不支持Video标签。
              </video>
              <div class="del" @click.stop="del(yh_index,i,'mv')"><img src="../../assets/images/delete.png" /></div>
            </ul>
            <div class="main-box yh-dibu" v-show="yh.xq_flag">
              <div class="main-box-in">
                <div class="main-texts" v-show="yh.jzrq">
                  <p class="" style="color: #000000;">截止日期-</p>
                  <div class="main-text-xz main-text-xz-over" @click="clickJzrq(yh_index)">
                    <span class="input-text">{{ yh.jzrq }}</span>
                  </div>
                </div>
                <div class="main-texts" v-show="!yh.jzrq">
                  <p class="" style="width: 30%;color: #000000;">截止日期</p>
                  <div class="main-text-xz" @click="clickJzrq(yh_index)">
                    <span class="input-text">请选择</span>
                    <img src="../../assets/images/appa_r.png" alt="" class="imgss">
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>


    </div>
    <div style="box-sizing: border-box;padding: 10px;background-color: white" v-show="wwc_flag">
      <div class="button" id="button" @click="save">确定</div>
    </div>
    <van-popup v-model="btm_show" position="bottom">
      <div v-if="terminal === true" class="btm_tk_item" @click="sp">上传视频</div>
      <div class="btm_tk_item" @click="pz">拍照</div>
      <div class="btm_tk_item btm_tk_item-end" @click="xc">从手机相册选择</div>
      <div class="btm_tk_cancle" @click="btm_show = false">取消</div>
    </van-popup>
    <div v-if="xclb_tk" class="modal-tk" @click="closeXclbTk"></div>
    <div v-if="xclb_tk" class="modal-main">
      <div class="modal-title">
        <p class=""></p>
        <img src="../../assets/images/tk_x.png" style="width: 18px;height: 18px" @click="closeXclbTk">
      </div>
      <div class="modal-main-text">
        <div class="modal-text" v-show="!((qx=='区级'||qx=='街道'||qx=='部门'||qx=='科室')&&item.name=='移交')"
          @click="selectXclb(item)" :style="item.cxbh === xclb_checked.cxbh ? 'color: #007aff;' : ''"
          v-for="(item,index) of xclb_list">{{item.name}}</div>
      </div>
      <div class="modal-main-text">
        <div class="button" @click="subXclbTk">确定</div>
      </div>
    </div>
    <div class="tanbox" v-show="tishi_show">
      <div class="tanbox-bg" @click="clolseTishi"></div>
      <div class="conte">
        <div class="tishi">
          <div>提示</div>
          <img src="../../assets/images/false.png" @click="clolseTishi" />
        </div>
        <div class="tk-main">
          <div class="shangc">{{ tishi }}</div>
          <div class="queding" @click="clolseTishi">确定</div>
        </div>
      </div>
    </div>
    <van-popup v-model="shows" position="bottom">
      <van-datetime-picker class="van-datetime-picker" v-model="currentDate" type="date" title="选择年月日"
        :min-date="minDate" :max-date="maxDate" @cancel="cancel" @confirm="confirm" />
    </van-popup>
  </div>
</template>

<script>
  import { Toast, Calendar } from "vant";
  import upload from "../../assets/js/upload_vue.js"
  import audio from "../../assets/js/audio.js"
  import utils from "../../assets/js/utils.js"
  import terminal from "../../assets/js/terminal";
  export default {
    name: "yhzz_detail",
    data() {
      return {
        yh_detail_patrolTroubleshootId: null,
        yh_detail_patrolTroubleshootInfoId: null,
        showUrl: '',
        showUrls: '',
        data: {},
        zxrw_list: [],
        yh_list: [],
        btm_show: false,
        xclb_tk: false,
        xclb_list: [],
        xclb_checked: {},
        upload_info: {},
        userId: null,//用户id
        wwc_flag: false,
        tishi: '',
        tishi_show: false,
        terminal: false,
        shows: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        jzrq_index: null,
        qx: '',//权限级别
        is_ok: false,
        datax: null,
      };
    },
    components: {
      [Toast.name]: Toast,
      [Calendar.name]: Calendar
    },
    destroyed() {
      setTimeout(() => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
    mounted() {
      var _this = this;
      this.terminal = terminal.terminals().android;
      this.userId = localStorage.getItem("userId"); //用户id
      var yh_detail_patrolTroubleshootId = localStorage.getItem('yh_detail_patrolTroubleshootId');
      var yh_detail_patrolTroubleshootInfoId = localStorage.getItem('yh_detail_patrolTroubleshootInfoId');
      if (yh_detail_patrolTroubleshootId && yh_detail_patrolTroubleshootId != 'undefined' && yh_detail_patrolTroubleshootId != 'null') {
        yh_detail_patrolTroubleshootId = JSON.parse(yh_detail_patrolTroubleshootId);
      } else {
        yh_detail_patrolTroubleshootId = null;
      }
      if (yh_detail_patrolTroubleshootInfoId && yh_detail_patrolTroubleshootInfoId != 'undefined' && yh_detail_patrolTroubleshootInfoId != 'null') {
        yh_detail_patrolTroubleshootInfoId = JSON.parse(yh_detail_patrolTroubleshootInfoId);
      } else {
        yh_detail_patrolTroubleshootInfoId = null;
      }

      var yh_detail_isBenji = localStorage.getItem('yh_detail_isBenji');
      if (yh_detail_isBenji || yh_detail_isBenji === 0) {
        yh_detail_isBenji = JSON.parse(yh_detail_isBenji);
      } else {
        yh_detail_isBenji = null;
      }

      this.yh_detail_isBenji = yh_detail_isBenji;
      this.yh_detail_patrolTroubleshootId = yh_detail_patrolTroubleshootId;
      this.yh_detail_patrolTroubleshootInfoId = yh_detail_patrolTroubleshootInfoId;
      this.showUrl = this.$global_msg.Url.hosts + '';
      this.showUrls = this.$global_msg.Url.host + '';
      this.init();
      this.getXclb();
      this.getuUserQx();
      audio.init(this.mui);
      //切换后台
      document.addEventListener("pause", function () {
        _this.stopPlay();
      }, false);
      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.back();
      // }, false);
    },
    methods: {
      clickJzrq(yh_index) {
        this.jzrq_index = yh_index;
        this.shows = true;
        this.$forceUpdate();
      },
      cancel() {
        this.jzrq_index = null;
        this.shows = false;
        this.$forceUpdate();
      },
      confirm() {
        console.log(this.currentDate);
        let date = this.currentDate;
        this.yh_list[this.jzrq_index].jzrq = date.getFullYear() + '-' +
          ((date.getMonth() + 1) < 10 ? `0${(date.getMonth() + 1)}` : date.getMonth() + 1) + '-' +
          (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
        this.shows = false;
        this.$forceUpdate();
      },
      getuUserQx() {
        var _this = this;
        _this.qx = '';
        _this.axios.get(
          `${_this.$global_msg.Url.host}/monitoringPlan/isRight?userId=${_this.userId}`
        ).then((res) => {
          console.log("权限级别", res);
          if(res.data.code==200){
            if (res.data.rows.dwlev == 0) {//区级
              _this.qx = '区级';
            } else if (res.data.rows.dwlev == 1) {//街道
              _this.qx = '街道';
            } else if (res.data.rows.dwlev == 2) {//社区、科室
              if (res.data.rows.dwlxid == 1) {//科室
                _this.qx = '科室';
              } else {//社区
                _this.qx = '社区';
              }
            }
          }else{
            _this.$toast(res.data.msg);
          }
          console.log(_this.qx)
          _this.$forceUpdate();
        }).catch(error => {
          _this.$terminal._error(error);
        });
      },
      stopPlay() {
        audio.stop();
        for (var n = 0; n < this.yh_list.length; n++) {
          this.yh_list[n].isPlay = false;
          this.yh_list[n].isPlay2 = false;
          this.yh_list[n].isPlay3 = false;
          if (this.yh_list[n].remediaHiddenDangers && this.yh_list[n].remediaHiddenDangers.length > 0) {
            for (var m = 0; m < this.yh_list[n].remediaHiddenDangers.length; m++) {
              this.yh_list[n].remediaHiddenDangers[m].isPlay4 = false;
            }
          }
        }
        this.$forceUpdate();
      },
      back() {
        this.stopPlay();
        var from = localStorage.getItem("yh_detail_from");
        localStorage.removeItem("yh_detail_from");
        // if(from){
        //   this.$router.push(from);
        // }else{
        //   this.$router.push("/index");
        // }
        this.$router.back()

      },
      init() {
        var _this = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        _this.wwc_flag = false;
        var params = {
          patrolTroubleshoot: _this.yh_detail_patrolTroubleshootId,
          patrolTroubleshootInfoId: _this.yh_detail_patrolTroubleshootInfoId,
          isBenji: _this.yh_detail_isBenji
        };
        var url = "/remediaHiddenDangers/dangerPointList";
        _this.axios.get(_this.$global_msg.Url.host + url, {
          params: params
        }).then(function (data) {
          console.log('/partroInspection/dangerList:', data);
          if (data && data.data) {
            if (data.data.code == 200) {
              if (data.data.rows) {
                /*for(var n=0;n<data.data.rows.dangerPointVos.length;n++){
                  if(!data.data.rows.dangerPointVos[n].noweInfo){
                    data.data.rows.dangerPointVos[n].noweInfo = {};
                  }
                  data.data.rows.dangerPointVos[n].status = '未完成';
                }*/

                var qi_name = '';
                var jie_name = '';
                var she_name = '';
                data.data.rows.people.forEach(item => {
                  if (item.level === 0) {
                    if (item.lev === 1 || item.lev === 2) {
                      qi_name += item.name + '、';
                    }
                  } else if (item.level === 1) {
                    if (item.lev === 1 || item.lev === 2) {
                      jie_name += item.name + '、';
                    }
                  } else if (item.level === 2) {
                    she_name += item.name + '、';
                  }
                });
                if (qi_name) {
                  qi_name = qi_name.substring(0, qi_name.length - 1);
                }
                if (jie_name) {
                  jie_name = jie_name.substring(0, jie_name.length - 1);
                }
                if (she_name) {
                  she_name = she_name.substring(0, she_name.length - 1);
                }
                data.data.rows.qi_name = qi_name;
                data.data.rows.jie_name = jie_name;
                data.data.rows.she_name = she_name;

                data.data.rows.dangerPointVos.forEach(item => {
                  if (!item.noweInfo) {
                    item.noweInfo = {
                      contract: '',
                      contractime: '',
                      imgText: '',
                      imgurl: '',
                      title: '',
                      videourl: ''
                    };
                  }
                  if (!item.rectificaContent) {
                    item.rectificaContent = {
                      contract: '',
                      contractime: '',
                      imgText: '',
                      imgUrl: '',
                      title: '',
                      videoUrl: ''
                    };
                  }
                  if (!item.remediaHiddenDangers) {
                    item.remediaHiddenDangers = [];
                  }
                  for (var m = 0; m < item.remediaHiddenDangers.length; m++) {
                    if (!item.remediaHiddenDangers[m].imgText) {
                      item.remediaHiddenDangers[m].imgText = '';
                    }
                    if (!item.remediaHiddenDangers[m].imgurl) {
                      item.remediaHiddenDangers[m].imgurl = '';
                    }
                    if (!item.remediaHiddenDangers[m].videourl) {
                      item.remediaHiddenDangers[m].videourl = '';
                    }
                  }
                  //item.noweInfo.status==3 移交 放出来
                  if (!(item.noweInfo.status == 1 || item.noweInfo.status == 6)) {
                    _this.wwc_flag = true;
                  }
                });

                _this.data = data.data.rows;
                _this.zxrw_list = data.data.rows.patrolSpecialTasks
                _this.yh_list = data.data.rows.dangerPointVos;
              } else {
                _this.data = {};
                _this.yh_list = [];
              }
              _this.$nextTick(() => {
                var msnrs = $('.msnr');
                for (var n = 0; n < msnrs.length; n++) {
                  console.log(msnrs[n].offsetHeight)
                  if (msnrs[n].offsetHeight > 54) {
                    $(msnrs[n]).addClass('msnr-span');
                  } else {
                    $(msnrs[n]).removeClass('msnr-span');
                  }
                }
              })
            } else {
              _this.$toast(data.data.msg);
            }
          } else {
            _this.$toast('查询失败');
          }
          _this.$forceUpdate();

          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
        }).catch(error => {
          _this.$terminal._error(error);
        });
      },
      getXclb() {
        var _this = this;
        var params = {
          type: 1
        };
        var url = "/partroInspection/selectDangerType";
        _this.axios.get(_this.$global_msg.Url.host + url, {
          params: params
        }).then(function (data) {
          console.log('/partroInspection/selectHazard:', data);
          if (data && data.data) {
            if (data.data.code == 200) {
              _this.xclb_list = data.data.rows;
              _this.$forceUpdate();
            } else {
              _this.$toast(data.data.msg);
            }
          } else {
            _this.$toast('查询失败');
          }
        }).catch(error => {
          _this.$terminal._error(error);
        });
      },
      getTime(time) {
        return utils.dateFormat(time, 'YYYY-MM-DD HH:mm:SS');
      },
      getJzrq(jzrq) {
        return utils.dateFormat(jzrq, 'YYYY-MM-DD');
      },
      showXclbTk(yh_index, item) {
        this.xclb_checked = {
          cxbh: item.xclb,
          index: yh_index
        };
        this.xclb_tk = true;
        this.$forceUpdate();
        //$("html").css("height","100vh");
        //$("body").css("height","100vh");
        $("html").css("overflow", "hidden");
        $("body").css("overflow", "hidden");
      },
      closeXclbTk() {
        this.xclb_tk = false;
        this.$forceUpdate();
        //$("html").css("height","auto");
        //$("body").css("height","auto");
        $("html").css("overflow", "auto");
        $("body").css("overflow", "auto");
      },
      selectXclb(item) {
        this.xclb_checked.cxbh = item.cxbh;
        this.$forceUpdate();
      },
      subXclbTk() {
        this.yh_list[this.xclb_checked.index].xclb = this.xclb_checked.cxbh;

        var mc = this.getXclbMc(this.xclb_checked.cxbh);
        if (mc.indexOf('限期') >= 0) {
          this.yh_list[this.xclb_checked.index].xq_flag = true;
        } else {
          this.yh_list[this.xclb_checked.index].xq_flag = false;
        }
        this.closeXclbTk();
      },
      getXclbMc(id) {
        var mc = '';
        for (var n = 0; n < this.xclb_list.length; n++) {
          if (this.xclb_list[n].cxbh === id) {
            mc = this.xclb_list[n].name;
          }
        }
        return mc;
      },
      //录音
      record(yh_index, event) {
        var _this = this;
        _this.yh_list[yh_index].isLy = true;
        _this.$forceUpdate();
        audio.stop();
        audio.record(function (data) {
          console.log(data);
          // _this.yh_list[yh_index].isLy = false;
          // _this.yh_list[yh_index].yyObj = data;
          // _this.$forceUpdate();
          try {
            plus.nativeUI.showWaiting("正在加载...");
          } catch (e) {
            console.log(e.message);
          }
          var yyObj = data;
          let params = {};
          audio.upload(_this.$global_msg.Url.host + '/partroInspection/uploadVoice', 'POST', params, yyObj.url, 'multipartFile', function (data2) {
            data2 = JSON.parse(data2);
            console.log('data2', data2)
            if (data2.code == 200) {
              yyObj.path = data2.rows;
              console.log('yyObj', yyObj)
              _this.yh_list[yh_index].isLy = false;
              _this.yh_list[yh_index].yyObj = data;
            } else {
              console.log(data2);
              _this.$toast(data2.msg);
            }
            _this.$forceUpdate();
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log('plus问题');
            }
          }, function (msg) {
            _this.$toast(msg);
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log('plus问题');
            }
          });
        }, function (msg) {
          console.log(msg)
          _this.$toast(msg);
          _this.yh_list[yh_index].isLy = false;
          _this.$forceUpdate();
        });
        event.preventDefault();
      },
      //停止录音
      recordStop(yh_index) {
        this.yh_list[yh_index].isLy = false;
        audio.stop();
        this.$forceUpdate();
      },
      //播放录音或停止播放录音
      play(yh_index) {
        var _this = this;
        audio.stop();
        if (_this.isPlay) {
          _this.yh_list[yh_index].isPlay = false;
          _this.$forceUpdate();
        } else {
          _this.yh_list[yh_index].isPlay = true;
          _this.$forceUpdate();
          audio.play(_this.showUrl + _this.yh_list[yh_index].noweInfo.contract, function () {
            _this.yh_list[yh_index].isPlay = false;
            _this.$forceUpdate();
          }, function (msg) {
            _this.$toast(msg);
            _this.yh_list[yh_index].isPlay = false;
            _this.$forceUpdate();
          });
        }
      },
      //播放录音或停止播放录音
      play3(yh_index) {
        var _this = this;
        audio.stop();
        if (_this.isPlay3) {
          _this.yh_list[yh_index].isPlay3 = false;
          _this.$forceUpdate();
        } else {
          _this.yh_list[yh_index].isPlay3 = true;
          _this.$forceUpdate();
          audio.play(_this.showUrl + _this.yh_list[yh_index].rectificaContent.contract, function () {
            _this.yh_list[yh_index].isPlay3 = false;
            _this.$forceUpdate();
          }, function (msg) {
            _this.$toast(msg);
            _this.yh_list[yh_index].isPlay3 = false;
            _this.$forceUpdate();
          });
        }
      },
      //播放录音或停止播放录音
      play4(yh_index, xz_index) {
        var _this = this;
        audio.stop();
        if (_this.isPlay4) {
          _this.yh_list[yh_index].remediaHiddenDangers[xz_index].isPlay4 = false;
          _this.$forceUpdate();
        } else {
          _this.yh_list[yh_index].remediaHiddenDangers[xz_index].isPlay4 = true;
          _this.$forceUpdate();
          audio.play(_this.showUrl + _this.yh_list[yh_index].remediaHiddenDangers[xz_index].contract, function () {
            _this.yh_list[yh_index].remediaHiddenDangers[xz_index].isPlay4 = false;
            _this.$forceUpdate();
          }, function (msg) {
            _this.$toast(msg);
            _this.yh_list[yh_index].remediaHiddenDangers[xz_index].isPlay4 = false;
            _this.$forceUpdate();
          });
        }
      },
      //播放录音或停止播放录音
      play2(yh_index) {
        var _this = this;
        audio.stop();
        if (_this.isPlay2) {
          _this.yh_list[yh_index].isPlay2 = false;
          _this.$forceUpdate();
        } else {
          _this.yh_list[yh_index].isPlay2 = true;
          _this.$forceUpdate();
          audio.play(_this.showUrl + _this.yh_list[yh_index].yyObj.path, function () {
            _this.yh_list[yh_index].isPlay2 = false;
            _this.$forceUpdate();
          }, function (msg) {
            _this.$toast(msg);
            _this.yh_list[yh_index].isPlay2 = false;
            _this.$forceUpdate();
          });
        }
      },
      deleteYy(yh_index) {
        this.yh_list[yh_index].yyObj = null;
        this.$forceUpdate();
      },
      zhuan(yh_index) {
        var _this = this;
        var path = _this.yh_list[yh_index].yyObj.url;
        audio.zhuan(path, function (data) {
          console.log('文字', data)
          var txtbxnr = _this.yh_list[yh_index].txtbxnr;
          txtbxnr = (txtbxnr || txtbxnr === 0) ? (txtbxnr + data) : data;
          if (txtbxnr && (txtbxnr.length > 500)) {
            _this.$toast('文字限制在500字以内!');
            return;
          }
          _this.yh_list[yh_index].txtbxnr = txtbxnr;
          _this.$forceUpdate();
        }, function (msg) {
          _this.$toast(msg)
        })
      },
      pz() {//拍照
        let that = this;
        that.btm_show = false;
        upload.paizhao(function (path) {
          console.log(path);
          that.uploadImg(path);
        }, function (msg) {
          if (msg !== 'resultCode is wrong') {
            that.$toast(msg);
          }
        });
      },
      xc() {//相册
        let that = this;
        that.btm_show = false;
        upload.xiangce('image', true, function (path) {
          console.log(path);
          path.map(res => {
            that.uploadImg(res);
          })
        }, function (msg) {
          if (msg !== 'User cancelled') {
            that.$toast(msg);
          }
        });
      },
      uploadImg(path) {//上传图片
        let that = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        let params = {};
        upload.uploadImg(that.$global_msg.Url.hosts + '/partroInspection/uploadImg', 'POST', params, path, 'multipartFile', function (data) {
          if (data.code == 200) {
            if (!that.yh_list[that.upload_info.index].list_img) {
              that.yh_list[that.upload_info.index].list_img = [];
            }
            that.yh_list[that.upload_info.index].list_img.push({
              path: data.rows
            })
          } else {
            that.$toast(data.msg);
          }
          that.$forceUpdate();
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
        }, function (msg) {
          that.$toast(msg);
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
        });
      },
      sp() {//视频
        let that = this;
        that.btm_show = false;
        upload.record(function (path) {
          console.log(path);
          console.log(typeof path);
          // let a = Array.from(path)
          //获取视频信息
          // a.map(res => {
          plus.io.getVideoInfo({
            filePath: path,
            success: function (data) {
              console.log(data);
              console.log(data.duration)
              //视频时间15秒以内才上传
              if ((data.duration * 1) > 11) {
                that.$toast('上传的视频时间请在10秒以内');
                return;
              } else {
                that.uploadVideo(path);
              }
            },
            fail: function (e) {
              that.$toast(e.msg + '1111111');
            }
          });
          // })
        }, function (msg) {
          if (msg !== 'User cancelled') {
            that.$toast(msg);
          }
        });
      },
      uploadVideo(path) {//上传视频
        let that = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        let params = {};
        upload.uploadVideo(that.$global_msg.Url.hosts + '/partroInspection/uploadMV', 'POST', params, path, 'multipartFile', function (data) {
          data = JSON.parse(data);
          if (data.code == 200) {
            if (!that.yh_list[that.upload_info.index].list_mv) {
              that.yh_list[that.upload_info.index].list_mv = [];
            }
            that.yh_list[that.upload_info.index].list_mv.push({
              path: data.rows
            });
          } else {
            console.log(data);
            that.$toast(data.msg);
          }
          that.$forceUpdate();
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
        }, function (msg) {
          that.$toast(msg);
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
        });
      },
      showDesc(yh_index, i) {//显示图片描述
        this.yh_list[yh_index].list_img[i].showDesc = !this.yh_list[yh_index].list_img[i].showDesc;
        this.$forceUpdate();
      },
      del(yh_index, i, type) {//删除图片
        if (type == 'img') {
          this.yh_list[yh_index].list_img.splice(i, 1);
        } else {
          this.yh_list[yh_index].list_mv.splice(i, 1);
        }
        this.$forceUpdate();
      },
      stopMP() { },
      //  下拉框显示
      showPop(yh_index) {
        this.upload_info = {
          index: yh_index
        };
        this.btm_show = true;
        this.$forceUpdate();
      },
      openTishi(tishi) {
        this.tishi = tishi;
        this.tishi_show = true;
        this.$forceUpdate();
        //$("html").css("height","100vh");
        //$("body").css("height","100vh");
        $("html").css("overflow", "hidden");
        $("body").css("overflow", "hidden");
      },
      clolseTishi() {
        this.tishi = '';
        this.tishi_show = false;
        this.$forceUpdate();
        //$("html").css("height","auto");
        //$("body").css("height","auto");
        $("html").css("overflow", "auto");
        $("body").css("overflow", "auto");
      },
      save() {
        var _this = this;

        var yhlb = '';
        var title = '';
        var contract = '';
        var contractime = '';
        var imgurl = '';
        var videourl = '';
        var imgtext = '';
        var noweInfoid = '';
        var jzrq = '';
        var xq_flag = false;
        if (_this.yh_list.length > 0) {
          yhlb = _this.yh_list[0].xclb;
          title = _this.yh_list[0].txtbxnr;
          xq_flag = _this.yh_list[0].xq_flag;
          if (xq_flag) {
            jzrq = _this.yh_list[0].jzrq ? _this.yh_list[0].jzrq : '';
          }
          if (_this.yh_list[0].yyObj) {
            contract = _this.yh_list[0].yyObj.path;
            contractime = _this.yh_list[0].yyObj.duration ? ((_this.yh_list[0].yyObj.duration / 1000) + '"') : '';
          }
          if (_this.yh_list[0].list_img) {
            _this.yh_list[0].list_img.forEach(item => {
              imgurl += item.path + ',';
              if (item.remark || item.remark === 0) {
                imgtext += item.remark + ',';
              } else {
                imgtext += ',';
              }
            });
          }
          if (_this.yh_list[0].list_mv) {
            _this.yh_list[0].list_mv.forEach(item => {
              videourl += item.path + ',';
            });
          }
          if (_this.yh_list[0].noweInfo && (_this.yh_list[0].noweInfo.id || _this.yh_list[0].noweInfo.id === 0)) {
            noweInfoid = _this.yh_list[0].noweInfo.id;
          }
        }
        if (imgurl) {
          imgurl = imgurl.substring(0, imgurl.length - 1);
        }
        if (imgtext) {
          imgtext = imgtext.substring(0, imgtext.length - 1);
        }
        if (videourl) {
          videourl = videourl.substring(0, videourl.length - 1);
        }

        if (!yhlb) {
          _this.openTishi('请选择跟踪巡查类别');
          return;
        }
        if ((!title) && (!contract)) {
          _this.openTishi('请填写巡查内容或按住语音说话');
          return;
        } else if ((!imgurl) && (!videourl)) {
          _this.openTishi('请添加图片或上传视频');
          return;
        }

        if (xq_flag && (!jzrq)) {
          _this.openTishi('请选择截止日期');
          return;
        }

        if (this.is_ok) {
          return false;
        }


        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log(e.message);
        }
        this.is_ok = true
        var params = {
          patroltroubleshootinfoid: _this.yh_detail_patrolTroubleshootInfoId,
          yhlb: yhlb,//隐患类别id
          cxbh: yhlb,
          title: title,//巡查内容
          contract: contract,//语言地址
          contractime: contractime,//语言时长
          imgurl: imgurl,//图片地址
          imgtext: imgtext,
          noweInfoid: noweInfoid,//父类id
          videourl: videourl,
          userId: _this.userId,
          time: jzrq
        };
        var url = "/partroInspection/addHazard";
        _this.axios.get(_this.$global_msg.Url.host + url, {
          params: params
        }).then(function (data) {
          console.log('/partroInspection/selectHazard:', data);
          if (data && data.data) {
            if (data.data.code == 200) {
              //_this.init();
              _this.back();
            } else {
              _this.is_ok = false
              _this.$toast(data.data.msg);
            }
          } else {
            _this.is_ok = false
            _this.$toast('查询失败');
          }
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log(e.message);
          }
        }).catch(error => {
          _this.$terminal._error(error);
        });
      }
    }
  }
</script>

<style scoped>
  * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  * {
    box-sizing: border-box;
  }

  textarea {
    -webkit-user-select: auto !important;
    -khtml-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
  }

  ::-webkit-calendar-picker-indicator {
    border: none;
    border-radius: 2px;
    box-shadow: inset 0 1px #fff, 0 1px #eee;
    background-color: transparent;
    background-image: -webkit-linear-gradient(top, transparent, transparent);
    color: #666;
  }

  input[type="date"] {
    -webkit-appearance: none;
  }

  .input-date {
    position: relative;
    z-index: 99;
    display: flex;
    justify-content: flex-end;
    width: 80px
  }

  .input-text {
    position: absolute;
    right: 1.111111rem;
    z-index: 98;
  }

  .video-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%
  }

  /* 视频列表 */
  .video-list {
    padding-top: 0.259259rem;
    /*margin-bottom:0.37037rem;*/
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    width: auto;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
    /*border-top: 1px #DDDDDD solid;*/
  }

  .video-list:last-child {
    margin-bottom: 0.37037rem;
  }

  .video-list video {
    width: 100%;
    height: 4.87037rem !important;
    margin-top: 0.259259rem;
  }

  .video-list video:first-child {
    margin-top: 0;
  }

  .video-list .del {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }

  .video-list .del img {
    width: 100%;
    height: 100%;
  }

  .video-list .del img {
    width: 100%;
    height: 100%;
  }

  .img-group {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }

  .img-btn {
    height: 100%;
  }

  .del-btn {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 78px;
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .main {
    padding-top: 1.8519rem;
    background-color: #f2f2f2;
  }

  .main-box {
    display: flex;
    justify-content: space-between;

    width: 100%;
    background-color: #fff;
    flex-direction: column;
  }

  .main-box-in {
    width: 100%;
    display: flex;
    padding: 0.462962rem 0.37037rem;
    /* justify-content: space-between; */
    border-bottom: 1px solid #ddd;
  }

  .main-box-in .left {
    width: 2rem;
    display: flex;
    align-items: flex-start;
  }

  .main-box-in .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }

  .main-box-in p {
    color: #999;
  }

  .yh-jzrq .main-box-in,
  .yh-dibu .main-box-in {
    border-top: 1px solid #ddd;
    border-bottom: none;
  }

  .text-rgt {
    color: #999;
  }

  .main-text {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .main-texts {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .main-text:first-child {
    justify-content: left;
  }

  .main-text-xz {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #999;
    flex: 1;
  }

  .main-text-xz-over {
    justify-content: flex-start !important;
    position: relative;
  }

  .main-text-xz-over .input-text {
    right: 0 !important;
    left: 0 !important;
  }

  .main-text-xz-over .input-date {
    margin-left: 0.8rem;
  }

  .imgss {
    width: 62px;
  }

  .main-box textarea {
    width: 100%;
    /*padding-top: 0.3704rem;*/
    overflow: hidden;
    pointer-events: none;
  }

  .main-btn {
    background-color: #007aff;
    color: #fff;
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    margin-right: 10px;
  }

  .imgs_ul {
    padding: 0;
    width: auto;
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
  }

  .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*border-bottom: 1Px solid #dddddd;*/
  }

  .lists1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .img-li {
    width: 50%;
    padding: 10px;
  }

  .img-box-main {
    border: 1px #CCCCCC solid;
    border-radius: 30px;
    overflow: hidden;
  }

  .img-box2 {
    height: 2.814814rem;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: flex;
  }

  .imglist-title {
    display: flex;
    text-align: justify;
    text-justify: newspaper;
    word-break: break-all;
    justify-content: flex-start;
  }

  .imglist-titles {
    display: flex;
    text-align: justify;
    text-justify: newspaper;
    word-break: break-all;
    justify-content: flex-start;
  }

  .imgs {
    width: 100%;
    height: 100%;
    z-index: 11;
  }

  .yy img {
    margin: 0 0.2rem;
    width: 0.4rem;
  }

  .yy {
    width: 2.3rem;
    height: 0.8rem;
    border: 1Px solid #ddd;
    display: flex;
    border-radius: 0.2rem;
    align-items: center;
  }

  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*border-bottom: 1Px solid #ddd;*/
    height: 1.3rem;
    padding: 0 0.555555rem;
  }

  .modal-tk {
    z-index: 1111;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
  }

  .modal-main {
    z-index: 1112;
    position: fixed;
    max-height: 100%;
    padding: 0 50px;
    width: 80%;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate3d(-50%, -50%, 0);
    transition: transform 0.3s;
    border-radius: 25px;
  }

  .modal-title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 30px 0;
  }

  .modal-text {
    padding: 50px 0;
    border-bottom: 1px solid #f2f2f2;
  }

  .button {
    width: 100%;
    height: 1rem;
    color: white;
    text-align: center;
    line-height: 1rem;
    /*background-color: #8f8f94;*/
    background-color: #2B6CFE;
    border-radius: 0.105185rem;
  }

  .buttons {
    pointer-events: none;
    background-color: #8f8f94;
  }

  .security {
    background-color: #FFFFFF;
    border-radius: 0.092592rem;
  }

  .boxitem {
    /* height: 1.3889rem; */
    padding: 0px 0.185185rem;
    font-size: 0.3889rem;
    /*border-bottom: 1Px solid #f2f2f2;*/
    overflow: hidden;
  }

  .boxitem textarea {
    width: 100%;
    padding-top: 0.3704rem;
    height: 3.125rem;
    overflow: hidden;
    border-bottom: 1Px solid #f2f2f2;
    padding-left: 0.37037rem;
    padding-right: 0.37037rem;
  }

  .popup-box {
    padding: 10px;
  }

  .popup-boxs {
    padding: 0 10px 10px;
  }

  .van-popup {
    background-color: transparent;
  }

  .btm_tk_item {
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    text-align: center;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
  }

  .btm_tk_item:first-child {
    border-radius: 0.148148rem 0.148148rem 0 0;
  }

  .btm_tk_item-end {
    border-radius: 0 0 0.148148rem 0.148148rem;
  }

  .btm_tk_cancle {
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #f2f2f2;
    text-align: center;
    margin: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }

  /* 图片列表 */
  .img-box {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.37037rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }

  .img-box .img-item {
    width: 4.481481rem;
    height: 2.814814rem;
    background-image: url('../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-bottom: 0.425925rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px #CCCCCC solid;
    border-radius: 30px;
  }

  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content {
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
  }

  .img-box .img-item .img-content .img-src {
    width: 100%;
    height: 100%;
    z-index: 11;
  }

  .img-box .img-item .img-content .img-group {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }

  .img-box .img-item .img-content .img-group .img-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px #FFFFFF solid;
  }

  .img-box .img-item .img-content .img-group .img-btn:last-child {
    border-left: none;
  }

  .img-box .del-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  .img-box .desc-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  /* 图片列表的描述 */
  .img-box .show-desc {
    height: 3.703703rem;
  }

  .img-box .img-item .img-desc {
    width: 100%;
    height: 0.851851rem;
    text-align: center;
    flex: 1;
    background-color: #FFFFFF;
    display: none;
  }

  .img-box .show-desc .img-desc {
    display: block;
  }

  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .img-list:first-child {
    margin-left: 4.814814rem;
  }

  .imgs_uls {
    margin-top: -3.255554rem;
    z-index: 2 !important;
  }

  .img_upload .img-item {
    z-index: 3 !important;
  }

  .yuyin_list {
    width: 100%;
    position: relative;
    display: flex;
    padding: 0.2315rem 0.3704rem;
    word-break: break-all;
    font-size: 0.3888888888888889rem;
    background-color: #fff;
    /*border-bottom: 1Px solid #f2f2f2;*/
    box-sizing: border-box;
  }

  .ly {
    width: 3.0185185185185186rem;
    height: 1rem;
    border: 1Px solid #ddd;
    border-radius: 0.1111rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #757575;
    /* justify-content: center; */
  }

  .ly img {
    width: 0.3704rem;
    height: 0.5rem;
    margin: 0 0.2777777777777778rem;
    /* margin-right: 0.2777777777777778rem; */
  }

  .ly_play .ly>span {
    float: right;
    /* margin: 0.282222rem 0.9259259259259259rem 0 0; */
  }

  .ly_start .ly>span {
    float: right;
    /* margin: 0.2037037037037037rem 0.46296296296296297rem 0 0; */
  }

  .del_ly,
  .zhuan {
    width: 0.8518518518518519rem;
    margin: 0.09259259259259259rem 0 0 0.23148148148148148rem;
    height: 0.8518518518518519rem;
  }

  .ly_tc {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    height: 3.7037037037037037rem;
    width: 3.7037037037037037rem;
    border-radius: 0.18518518518518517rem;
    text-align: center;
    z-index: 2000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.3888888888888889rem;
    display: none;
  }

  .ly_tc>img {
    margin: 1rem auto 0 auto;
    width: 1.5rem;
  }

  .yc {
    display: none;
  }

  .ly_play>div {
    display: flex;
  }

  .ly_play {
    display: none;
  }

  .actives {
    pointer-events: none;
  }

  .img-box-main {
    border: 1px #CCCCCC solid;
    border-radius: 30px;
    overflow: hidden;
  }

  .img-box-list {
    height: 2.814814rem;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: flex;
  }

  .imgs {
    width: 100%;
    height: 100%;
    z-index: 11;
  }

  .img-li {
    width: 4.481481rem;
    /*height: 2.814814rem;*/
    padding: 10px;
  }

  .img-btns {
    height: 100%;
  }

  .del-btns {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 78px;
  }

  .img-groups {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }

  .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .lists1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .imgs_ul-list {
    width: 100%;
    padding: 0.3rem 0.4rem;
  }

  .imglist-title {
    display: flex;
    text-align: justify;
    text-justify: newspaper;
    word-break: break-all;
    justify-content: flex-start;
  }

  .selectXclb {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #999;
  }

  .selectXclb .right-icon {
    width: 0.444444rem;
    height: 0.444444rem;
  }

  .modal-main-text .button {
    margin-top: 0.185185rem;
    margin-bottom: 0.37037rem;
  }

  .dians {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.35rem;
  }

  .dians-sq {
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    display: flex;
    align-items: center;
  }

  .dians-box {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #909090;
  }

  .dian-imgs {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .dians-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 2.2rem;
  }

  .addNewImg {
    margin-top: -3.55rem;
  }

  .isShow {
    display: block !important;
  }

  .noShow {
    display: none !important;
  }

  .zxrw {
    /*margin-bottom: 0.185185rem;*/
  }

  .yh-box {
    margin-bottom: 0.185185rem;
  }

  .yhzz {
    background-color: #f2f2f2;
  }

  .list .list_two {
    color: #909090;
  }

  .msnr {
    align-items: flex-start;
    /*height: 2rem;*/
    /*color: #999;*/
  }

  .msnr-more {
    height: auto;
  }

  .yh-dibu .list_two {
    color: #909090;
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .shangc {
    width: 80%;
    margin-bottom: 40px;
  }

  .queding {
    width: 30%;
    color: white;
    text-align: center;
    background-color: #2B6CFE;
    border-radius: 0.092592rem;
    padding: 20px 0;
  }

  .tishi {
    border-bottom: 0.018518rem solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.5rem;
  }

  .tishi img {
    width: 0.4rem;
  }

  .conte {
    width: 70%;
    background: #FFFFFF;
    border-radius: 0.185185rem;
    z-index: 302;
  }

  .tanbox {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 777;
  }

  .tanbox-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 301;
  }

  .tk-main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 0;
  }

  .yh_light {
    width: 100% !important;
  }

  .yh_light .hd {
    width: 0.4074rem;
    height: 0.4074rem;
    margin-top: 0.0556rem;
  }

  .yh_light .gou {
    width: 0.3704rem;
    height: 0.3704rem;
    margin-top: 0.0556rem;
  }

  .yhd {
    width: auto !important;
  }

  .yhd-txt {
    color: #000000 !important;
    justify-content: flex-start !important;
  }

  .msnr-span {
    text-indent: 2em
  }
</style>
